<template>
    <span>计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：</span>
    <br><span>
        import { ref, computed } from 'vue'
        <br>
        <br>const firstName = ref('John')
        <br>const lastName = ref('Doe')
        <br>
        <br> const fullName = computed({
        <br>// getter
        <br> get() {
        <br>return firstName.value + ' ' + lastName.value
        br},
        <br>// setter
        <br>set(newValue) {
        <br>// 注意：我们这里使用的是解构赋值语法
        <br>[firstName.value, lastName.value] = newValue.split(' ')
        <br> }
        <br> })</span>
    <br>
    <span>现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。</span>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue';

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
    get() {
        return firstName.value + ' ' + lastName.value
    },
    set(newValue) {
        [firstName.value, lastName.value] = newValue.split(' ')
    }
})

</script>

<style></style>